<template>
    <el-form :model="ruleForm" :rules="rules" ref="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="直播标题" prop="liveTitle">
            <el-input placeholder="请输入直播标题" v-model="ruleForm.liveTitle"></el-input>
        </el-form-item>
        <el-form-item label="直播副标题" prop="liveAssTitle">
            <el-input placeholder="请输入直播标题副" v-model="ruleForm.liveAssTitle"></el-input>
        </el-form-item>
        <el-form-item label="直播简介" prop="liveBrief">
            <el-input type="textarea" placeholder="请输入内容" v-model="ruleForm.liveBrief"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" required>
            <el-col :span="11">
                <el-form-item prop="beginTime">
                    <el-date-picker type="date" placeholder="开始日期" value-format="timestamp" v-model="ruleForm.beginTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="结束时间" required>
            <el-col :span="11">
                <el-form-item prop="endTime">
                    <el-date-picker type="date" placeholder="结束日期" value-format="timestamp" v-model="ruleForm.endTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="直播链接" prop="liveHref">
            <el-input placeholder="请输入直播链接" v-model="ruleForm.liveHref"></el-input>
        </el-form-item>
        <el-form-item label="重播链接" prop="reliveHref">
            <el-input placeholder="请输入重播链接" v-model="ruleForm.reliveHref"></el-input>
        </el-form-item>
        <el-form-item label="主讲老师" prop="mainTeacher">
            <el-select v-model="ruleForm.mainTeacher" placeholder="请选择" @visible-change="searchTeacher" clearable @change="selValueOne">
                <el-option
                        v-for="item in searchteacherList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="主讲老师2">
            <el-select v-model="ruleForm.TeacherTwo" placeholder="请选择" @visible-change="searchTeacherTwo" clearable @change="selValueTwo">
                <el-option
                        v-for="item in searchteacherListTwo"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="主讲老师3">
            <el-select v-model="ruleForm.TeacherThree" placeholder="请选择" @visible-change="searchTeacherThree" clearable @change="selValueThree">
                <el-option
                        v-for="item in searchteacherListThree"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="dynamicTags">
            <el-tag
                    :key="tag"
                    v-for="tag in ruleForm.dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
        </el-form-item>
        <el-form-item label="科目" prop="subject">
            <el-select v-model="ruleForm.subject"  placeholder="请选择">
                <el-option
                        v-for="item in subjectGroup"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
            <el-select v-model="ruleForm.grade" multiple placeholder="请选择">
                <el-option
                        v-for="item in gradeGroup"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="显示位置" prop="checkList">
            <el-checkbox-group v-model="ruleForm.checkList" @change="selCheckbox">
                <el-checkbox label="1">PC端</el-checkbox>
                <el-checkbox label="2">移动端</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="图片上传" prop="name">
            <el-upload
                    class="avatar-uploader"
                    :action="actionImageUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessPc"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrlPc" :src="imageUrlPc" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-upload
                    class="avatar-uploader"
                    :action="actionImageUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessMobile"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrlMobile" :src="imageUrlMobile" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="上传二维码" prop="name">
            <el-upload
                    class="avatar-uploader"
                    :action="actionImageUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessQr"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrlQr" :src="imageUrlQr" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="二维码介绍" prop="qrcodeBrief">
            <el-input type="textarea" placeholder="请输入简介，控制在300字内" v-model="ruleForm.qrcodeBrief"></el-input>
        </el-form-item>
        <el-form-item label="直播课程详情" prop="content">
            <quill-editor
                    v-model="ruleForm.content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)">
            </quill-editor>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="sureUpdateCourse">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    /* eslint-disable no-console */

    import { quillEditor } from 'vue-quill-editor'
    import { ImageAction, ApiGetMainTeacher, ApiEditCourseList, ApiUpdateCourseList } from '../../common/js/api'
    export default {
        data() {
            return {
                checkone:'',
                checktwo:'',
                actionImageUrl: ImageAction + 'admin/image/uploadImage',
                searchteacherList: [], // 主讲老师
                searchteacherListTwo: [], // 主讲老师2
                searchteacherListThree: [], // 主讲老师3
                valTeacherOne: '', // 选中的第一个主讲老师值
                valTeacherTwo: '', // 选中的第二个主讲老师值
                valTeacherThree: '', // 选中的第三个主讲老师值
                loading: false,
                content:null,
                editorOption:{},
                value5:[],
                state4:'',
                imageUrlPc: '', //pc图片地址
                imageUrlMobile: '', //移动图片地址
                imageUrlQr: '', //二维码图片地址
                checked1: 1,
                checked2: 2,
                loadSureBtn: false,
                subjectGroup: [{
                    value: 'chinese',
                    label: '语文'
                }, {
                    value: 'math',
                    label: '数学'
                }, {
                    value: 'english',
                    label: '英语'
                }, {
                    value: 'physics',
                    label: '物理'
                }, {
                    value: 'chemistry',
                    label: '化学'
                }, {
                    value: 'history',
                    label: '历史'
                }, {
                    value: 'geography',
                    label: '地理'
                }, {
                    value: 'other',
                    label: '其他'
                }],
                gradeGroup: [{
                    value: '1',
                    label: '一年级'
                }, {
                    value: '2',
                    label: '二年级'
                }, {
                    value: '3',
                    label: '三年级'
                }, {
                    value: '4',
                    label: '四年级'
                }, {
                    value: '5',
                    label: '五年级'
                }, {
                    value: '6',
                    label: '六年级'
                }, {
                    value: '7',
                    label: '初一'
                }, {
                    value: '8',
                    label: '初二'
                }, {
                    value: '9',
                    label: '初三'
                }, {
                    value: '10',
                    label: '高一'
                }, {
                    value: '11',
                    label: '高二'
                }, {
                    value: '12',
                    label: '高三'
                }, {
                    value: '0',
                    label: '无'
                }],
                inputVisible: false,
                inputValue: '',
                ruleForm: {
                    liveTitle: '', // 直播标题
                    liveAssTitle: '', // 直播副标题
                    liveBrief: '', // 直播简介
                    beginTime: '', // 开始时间
                    endTime: '', // 结束时间
                    liveHref: '', // 直播链接
                    reliveHref: '', // 重播链接
                    mainTeacher: '', // 主讲老师
                    mainTeacherid: '', // 主讲老师id
                    TeacherTwo: '', // 主讲老师2
                    TeacherTwoid: '', // 主讲老师2id
                    TeacherThree: '', // 主讲老师3
                    TeacherThreeid: '', // 主讲老师3id
                    dynamicTags: [], // 标签
                    subject: '', // 科目
                    grade: [], // 年级
                    status: '',
                    qrcodeBrief: '', // 二维码介绍
                    content: '', // 课程介绍
                    checkList:[],
                },
                rules: {
                    content: [
                        { required: true, message: '请输入详情', trigger: 'blur' }
                    ],
                    liveTitle: [
                        { required: true, message: '请输入直播标题', trigger: 'blur' }
                    ],
                    liveAssTitle: [
                        { required: true, message: '请输入直播副标题', trigger: 'blur' }
                    ],
                    liveBrief: [
                        { required: true, message: '请输入直播简介', trigger: 'blur' }
                    ],
                    liveHref: [
                        { required: true, message: '请输入直播链接', trigger: 'blur' }
                    ],
                    reliveHref: [
                        { required: true, message: '请输入重播链接', trigger: 'blur' }
                    ],
                    beginTime: [
                        { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    endTime: [
                        { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                    mainTeacher: [
                        { required: true, message: '请选择主讲老师', trigger: 'change' }
                    ],
                    dynamicTags: [
                        { type: 'array', required: true, message: '请至少添加一个标签', trigger: 'change' }
                    ],
                    subject: [
                        { required: true, message: '请选择科目', trigger: 'change' }
                    ],
                    grade: [
                        { type: 'array', required: true, message: '请选择年级', trigger: 'change' }
                    ],
                    qrcodeBrief: [
                        { required: true, message: '请输入二维码介绍', trigger: 'blur' }
                    ],
                    checkList: [
                        { type: 'array', required: true, message: '请至少选择一个位置', trigger: 'change' }
                    ],
                }
            };
        },
        methods: {
            selCheckbox(val){
                if(val.length === 2){
                    this.checkone = 1;
                    this.checktwo = 2;
                }
                if(val.length === 1 && val[0] === '1'){
                    this.checkone = 1;
                    this.checktwo = '';
                }
                if(val.length === 1 && val[0] === '2'){
                    this.checkone = '';
                    this.checktwo = 2;
                }
            },
            handleClose(tag) {
                this.ruleForm.dynamicTags.splice(this.ruleForm.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.ruleForm.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            onEditorBlur(){//失去焦点事件
            },
            onEditorFocus(){//获得焦点事件
            },
            onEditorChange(){//内容改变事件
            },
            querySearchAsync() {
            },
            handleSelect() {
            },
            sureUpdateCourse: function(){
                this.$refs['rules'].validate((valid) => {
                    if (valid) {
                        // if(this.loadSureBtn){
                        //     return false
                        // }
                        // this.loadSureBtn = true;
                        if(this.ruleForm.checkList[1]){
                            this.checktwo = Number(this.ruleForm.checkList[1])
                        }else {
                            this.checktwo = 0
                        }
                        let params = { // 课程修改
                            id:this.id,
                            name: this.ruleForm.liveTitle, // 课程标题
                            subtitle: this.ruleForm.liveTitle, // 课程副标题
                            introduction: this.ruleForm.liveBrief, // 课程简介
                            start_time: this.ruleForm.beginTime, // 开始时间
                            end_time: this.ruleForm.endTime, // 结束时间
                            live_link: this.ruleForm.liveHref, // 直播视频链接
                            replay_link: this.ruleForm.reliveHref, // 重播链接
                            teacher_id: this.ruleForm.mainTeacher, // 主讲老师
                            teachers_id: this.ruleForm.mainTeacher + ',' + this.ruleForm.TeacherTwo + ',' + this.ruleForm.TeacherThree, // 所有老师
                            tags: this.ruleForm.dynamicTags, // 标签
                            subject: this.ruleForm.subject, //科目
                            grade: this.ruleForm.grade, //年级
                            status: Number(this.ruleForm.checkList[0])+this.checktwo,
                            pc_image_url: this.imageUrlPc, // 课程pc端图片url
                            mt_image_url: this.imageUrlMobile, // 课程移动端图片url
                            code_url:this.imageUrlQr, // 二维码链接
                            code_desc: this.ruleForm.qrcodeBrief, // 二维码介绍
                            content: this.ruleForm.content // 课程介绍
                        }
                        ApiUpdateCourseList(params).then(res => {
                            console.log("编辑确定", res)
                            if(res.data.code === 0){
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                });
                            }
                        }).catch(() => {

                        });
                    }
                })

            },
            // 获取主讲老师
            searchTeacher(){
                ApiGetMainTeacher({}).then(res => {
                    if(res.data.code === 0){
                        this.searchteacherList = res.data.data
                    }
                }).catch(() => {

                });
            },
            // 获取主讲老师2
            searchTeacherTwo(){
                ApiGetMainTeacher({}).then(res => {
                    if(res.data.code === 0){
                        this.searchteacherListTwo = res.data.data;
                    }
                }).catch(() => {

                });
            },
            // 获取主讲老师3
            searchTeacherThree(){
                ApiGetMainTeacher({}).then(res => {
                    if(res.data.code === 0){
                        this.searchteacherListThree = res.data.data;
                    }
                }).catch(() => {

                });
            },
            selValueOne(val){
                this.ruleForm.mainTeacherid = val;
            },
            selValueTwo(val){
                if(this.ruleForm.mainTeacherid !== ''){
                    this.ruleForm.TeacherTwoid = val;
                    if(this.ruleForm.mainTeacherid === val || this.ruleForm.TeacherThreeid === val){
                        this.$message({
                            message: '由于选择相同的老师，请更换其他老师！',
                            type: 'warning'
                        });
                        this.ruleForm.TeacherTwo = '';
                    }
                }else {
                    this.$message({
                        message: '请先选择主讲老师！',
                        type: 'warning'
                    });
                    this.ruleForm.TeacherTwo = '';
                }
            },
            selValueThree(val){
                if(this.ruleForm.mainTeacherid !== ''){
                    this.ruleForm.TeacherThreeid = val;
                    if(this.ruleForm.mainTeacherid === val || this.ruleForm.TeacherTwoid === val){
                        this.$message({
                            message: '由于选择相同的老师，请更换其他老师！',
                            type: 'warning'
                        });
                        this.ruleForm.TeacherThree = '';
                    }
                }else {
                    this.$message({
                        message: '请先选择主讲老师！',
                        type: 'warning'
                    });
                    this.ruleForm.TeacherThree = '';
                }
            },
            // 上传PC
            handleAvatarSuccessPc(res, file) {
                this.imageUrlPc = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload() {
                // const isJPG = file.type === 'image/jpeg';
                // const isLt2M = file.size / 1024 / 1024 < 2;
                //
                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传头像图片大小不能超过 2MB!');
                // }
                // return isJPG && isLt2M;
            },
            // 上传PC
            handleAvatarSuccessMobile(res, file) {
                this.imageUrlMobile = URL.createObjectURL(file.raw);
            },
            // 上传PC
            handleAvatarSuccessQr(res, file) {
                this.imageUrlQr = URL.createObjectURL(file.raw);
            },
        },
        created() {
            // 获取编辑对应id
            this.id = this.$router.currentRoute.query.id;
            ApiEditCourseList({id: this.id}).then(res => {
                if(res.status === 200){
                    this.ruleForm.liveTitle = res.data.data.name;
                    this.ruleForm.liveAssTitle = res.data.data.subtitle;
                    this.ruleForm.liveBrief = res.data.data.introduction;
                    this.ruleForm.beginTime = res.data.data.start_time*1000;
                    this.ruleForm.endTime = res.data.data.end_time*1000;
                    this.ruleForm.liveHref = res.data.data.live_link;
                    this.ruleForm.reliveHref = res.data.data.replay_link;
                    this.ruleForm.mainTeacherid = res.data.data.teachers_id.substr(0,1);
                    console.log(this.ruleForm.mainTeacherid)
                    this.ruleForm.TeacherTwoid = res.data.data.teachers_id.substr(2,1);
                    console.log(this.ruleForm.TeacherTwoid)
                    this.ruleForm.TeacherThreeid = res.data.data.teachers_id.substr(4,1);
                    console.log(this.ruleForm.TeacherThreeid)
                    this.ruleForm.dynamicTags = res.data.data.tags;
                    this.ruleForm.subject = res.data.data.subject;
                    this.ruleForm.grade = res.data.data.grade.split(',');
                    if(res.data.data.status === 1){
                        this.ruleForm.checkList.push("1");
                    }else if(res.data.data.status === 2){
                        this.ruleForm.checkList.push("2");
                    }else {
                        this.ruleForm.checkList.push("1");
                        this.ruleForm.checkList.push("2");
                    }
                    this.ruleForm.qrcodeBrief = res.data.data.code_desc;
                    this.imageUrlQr = res.data.data.code_url; // 二维码地址
                    this.imageUrlPc = res.data.data.pc_image_url; // PC地址
                    this.imageUrlMobile = res.data.data.mt_image_url; // 移动端地址
                    this.ruleForm.content = res.data.data.content;
                }
                console.log("bbb",this.searchteacherList)
                for(let obj of this.searchteacherList) {
                    if(obj.id == this.ruleForm.mainTeacherid){
                        this.ruleForm.mainTeacher = obj.id
                    }
                }
                for(let obj of this.searchteacherListTwo) {
                    if(obj.id == this.ruleForm.TeacherTwoid){
                        this.ruleForm.TeacherTwo = obj.id
                    }
                }
                for(let obj of this.searchteacherListThree) {
                    if(obj.id == this.ruleForm.TeacherThreeid){
                        this.ruleForm.TeacherThree = obj.id
                    }
                }

            }).catch(() => {

            });
        },
        mounted(){
            this.searchTeacher();
            this.searchTeacherTwo();
            this.searchTeacherThree();

        }
    }
</script>
<style lang="scss">
    .demo-ruleForm{
        width:600px;
        max-width: 100%;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
